import {
    NavBar, Form, Input, Button, Toast
} from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import '../assets/style/reg.scss';
import axios from '../plugins/http';
export default function Reg() {
    const navigate = useNavigate();
    const login = async ({ phone, password }) => {
        if (phone === '') {
            return Toast.show('请输入手机号码');
        }
        if (password === '') {
            return Toast.show('请输入密码');
        }
        const res = await axios.post('/login', { phone, password });
        if (res.code == 200) {
            // 将登录数据写入本地存储
            localStorage.setItem('memberLoginInfo', JSON.stringify(res.list));
            // 自动跳转到会员中心页面
            return navigate('/user');
        }
        Toast.show(res.msg);
    }
    return (
        <div className='reg-container'>
            <NavBar className='page-header' onBack={() => navigate(-1)}>会员登录</NavBar>

            <div className="logo"></div>
            <Form
                onFinish={login}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        立即登录
                    </Button>
                }
            >
                <Form.Item
                    name='phone'
                    rules={[{ required: true, message: '手机号不能为空' }]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item name='password'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
            </Form>
            <div style={{ padding: 10 }}>
                <Button onClick={() => navigate('/reg')} color="default" block size="middle">没有账号,立即注册</Button>
            </div>

        </div>
    )
}
